<template>
  <div class="total-user">
    <CommonCard title="累计用户数" :value="reportData.totalUser">
      <v-chart :option="option" />
      <template #footer>
        <div class="wrapper">
          <div>
            <span>日同比</span>
            <span class="css-1">{{ reportData.userGrowLastDay }}%</span>
            <span class="increase"></span>
          </div>
          <div>
            <span>月同比</span>
            <span class="css-1">{{ reportData.userGrowLastMonth }}%</span>
            <span class="decrease"></span>
          </div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import CommonCard from "./CommonCard.vue";

export default {
  props: ["reportData"],
  data() {
    return {
      option: {},
    };
  },
  methods: {
    //这个方法是用来给option赋值的
    renderChart(data1, data2) {
      this.option = {
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          show: false,
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
        },
        series: [
          {
            type: "bar",
            data: [data1],
            itemStyle: {
              color: "green",
            },
            barWidth: 10,
            stack: "总量",
          },
          {
            type: "bar",
            data: [data2],
            itemStyle: {
              color: "#ddd",
            },
            barWidth: 10,
            stack: "总量",
          },
          {
            type: "custom",
            renderItem: (params, api) => {
              //获取三角形绘制的那个位置
              const endPoint = api.coord([api.value(0), 0]);
              return {
                type: "group",
                children: [
                  {
                    type: "path",
                    shape: {
                      d: "M511.744 319.999l-383.744 383.744h767.488l-383.744-383.744z",
                      x: endPoint[0] - 5,
                      y: 35,
                      width: 10,
                      height: 10,
                      layout: "cover",
                    },
                    style: {
                      fill: "green",
                    },
                  },
                  {
                    type: "path",
                    shape: {
                      d: "M889.696 320.8H158.848l365.504 365.536 365.344-365.536z",
                      x: endPoint[0] - 5,
                      y: 5,
                      width: 10,
                      height: 10,
                      layout: "cover",
                    },
                    style: {
                      fill: "green",
                    },
                  },
                ],
              };
            },
            data: [data1],
          },
        ],
      };
    },
  },
  components: {
    CommonCard,
  },
  //   mounted() {
  //     this.renderChart();
  //   },
  watch: {
    reportData(newValue) {
      this.renderChart(newValue.userLastMonth, newValue.userToday);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  gap: 10px;
}
</style>
